<template>
  <div class="journall">
    <div class="journall_head">
      <!-- 时间 -->

      <el-date-picker
        v-model="value1"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <!-- 活动名称 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-input
          v-model="formInline.user"
          placeholder="日志名称"
          class="journal"
        ></el-input>
        <el-select v-model="formInline.region" placeholder="类型">
          <el-option label="类型一" value="shanghai"></el-option>
          <el-option label="类型二" value="beijing"></el-option>
          <el-option label="类型三" value="beijing"></el-option>
        </el-select>
      </el-form>
      <div class="anniu_b">
        <el-button
          type="primary"
          @click="onSubmit"
          icon="el-icon-search"
          class="sea"
          >搜索</el-button
        >
        <el-button type="primary" @click="onDele" class="rizhi"
          >清空日志</el-button
        >
      </div>
    </div>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="journal_type"
        label="日志类型"
        width="120"
        sortable
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="journal_sign"
        label="日志标记"
        width="120"
        sortable
      >
        <template slot-scope="scope">{{ scope.row.journal_sign }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="operationIP"
        label="操作IP"
        show-overflow-tooltip
        sortable
      >
        <template slot-scope="scope">{{ scope.row.operationIP }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="journal_name"
        label="日志名称"
        show-overflow-tooltip
        sortable
      >
        <template slot-scope="scope">{{ scope.row.journal_name }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="user_name"
        label="用户名称"
        show-overflow-tooltip
        sortable
      >
        <template slot-scope="scope">{{ scope.row.user_name }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="user_role"
        label="用户角色"
        show-overflow-tooltip
        sortable
      >
        <template slot-scope="scope">{{ scope.row.user_role }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="date"
        label="时间"
        show-overflow-tooltip
        sortable
      >
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="operation"
        label="操作"
        show-overflow-tooltip
        sortable
      >
        <template slot-scope="scope"
          ><el-button @click="chakan">{{
            scope.row.operation
          }}</el-button></template
        >
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="paging">
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      currentPage4: 4,
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      formInline: {
        user: "",
        region: "",
      },
      tableData: [
        {
          journal_type: "登录日志",
          journal_sign: "成功",
          operationIP: "116.153.14.15",
          journal_name: "登录成功（GIP)",
          user_name: "GFT",
          user_role: "超级管理员",
          date: "2021-12-6 11.09",
          operation: "查看详情",
        },
        {
          journal_type: "登录日志",
          journal_sign: "成功",
          operationIP: "116.153.14.15",
          journal_name: "登录成功（GIP)",
          user_name: "GFT",
          user_role: "超级管理员",
          date: "2021-12-6 11.09",
          operation: "查看详情",
        },
        {
          journal_type: "登录日志",
          journal_sign: "成功",
          operationIP: "116.153.14.15",
          journal_name: "登录成功（GIP)",
          user_name: "GFT",
          user_role: "超级管理员",
          date: "2021-12-6 11.09",
          operation: "查看详情",
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      alert("搜索");
    },
    onDele() {
      alert("清空日志");
    },
    chakan() {
      alert("查看详情");
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>


<style scoped>
.journall {
  padding: 15px;
  background: #fff;
}
.journall_head {
  display: flex;
  margin-bottom: 10px;
}
.journal {
  height: 40px;
  width: 150px;
  margin-left: 5px;
  margin-right: 5px;
}
.anniu_b {
  width: 198px;
  height: 41px;
}
.sea {
  background-color: #009688;
  border-color: #409eff;
  color: #fff;
  margin-left: 5px;
}
.rizhi {
  margin-left: 5px;
  background-color: #ff5722;
  border-color: #409eff;
  color: #fff;
}
/* 分页 */
.paging {
  margin-top: 30px;
  margin-bottom: 15px;
}
</style>